<template>
  <view class="classify">
    <view class="">
      <view class="navbar">
        <uni-icons class="" type="back" size="18" @click="navBack"></uni-icons>
        <div class="input" @click="searchPage">
          <uni-icons class="icon" type="search" size="18"></uni-icons>
          <span class="icon_span">请输入商品名称</span>
        </div>
      </view>
      <div class="navbar_height"></div>
      <view class="all_area">
        <view class="left_area">
          <scroll-view
            class="scroll_left"
            scroll-y="true"
            :scroll-top="scrollTop"
          >
            <view
              class="sign_second flex-center"
              :class="{ active_text: secondIndex == index }"
              v-for="(item, index) in first_list"
              :key="index"
              @click="toggleTab(index)"
            >
              <text>{{ item.title | hideTitle }}</text>
            </view>
          </scroll-view>
        </view>
        <view class="right_area">
          <view class="right_top">
            <view class="tab_box" v-if="open == false">
              <u-tabs
                class="row_tabs"
                :is-scroll="true"
                :list="second_list"
                name="title"
                :current="current"
                @change="change"
                :show-bar="false"
                :addBorder="false"
                :active-item-style="{
                  color: '#000',
                  backgroundColor: 'rgba(64, 174, 54,0.2)',
                  fontWeight: 'normal',
                }"
                inactive-color="rgba(0, 0, 0, .85)"
              ></u-tabs>
            </view>
            <view v-else style="width: 100%">
              <view
                style="
                  font-weight: bold;
                  padding-top: 30rpx;
                  padding-left: 20rpx;
                  box-sizing: border-box;
                "
                >全部分类</view
              >
              <view
                class="over_box"
                :style="cssVars"
                :class="[open == false ? '' : 'new_hig']"
              >
                <!-- <view
                  class="new_block"
                  v-for="(item, index) in second_list"
                  :key="index"
                  :class="{ active: currentClass == index }"
                  @click="selectSecond(item.id, index)"
                > -->
                <view
                  class="new_block"
                  v-for="(item, index) in second_list"
                  :key="index"
                  :class="{ active: currentClass == index }"
                  @click="change(index)"
                >
                  {{ item.title | hideTitle1 }}
                </view>
              </view>
            </view>
            <image
              v-if="open"
              class="icon_down"
              src="/static/images/xiangx.svg"
              mode="scaleToFill"
              style="
                position: absolute;
                top: 30rpx;
                right: 0;
                width: 22rpx;
                height: 22rpx;
              "
              name="arrow-up"
              @click="down()"
            />
            <image
              v-else
              class="icon_down"
              src="/static/images/xiangs.svg"
              mode="scaleToFill"
              style="
                position: absolute;
                top: 30rpx;
                right: 0;
                width: 22rpx;
                height: 22rpx;
              "
              name="arrow-down"
              @click="down()"
            />
          </view>

          <view class="right_content" :style="{ marginTop: temp + 'rpx' }">
            <scroll-view
              scroll-y="true"
              class="all_good_height"
              @scrolltoupper="upper"
              @scrolltolower="tolower"
              scroll-with-animation
              @scroll="scrollGet($event)"
            >
              <view
                v-for="(item, index) in goods_list"
                :key="index"
                class="sign_good my_listcol"
              >
                <view class="list" v-if="!item.title">
                  <view class="flex info" @click="detailPage(index, item.id)">
                    <image
                      class="photo"
                      :src="item.img"
                      mode="aspectFit"
                    ></image>
                    <view class="desc">
                      <view class="list_name">
                        <text class="name">{{ item.name }}</text>
                        <text class="des" v-if="item.spu.length == 1">{{
                          item.spu[0].describe || ""
                        }}</text>
                      </view>
                      <view class="price_top">
                        <text class="red_font ten"
                          ><text style="font-size: 22rpx">￥</text
                          >{{ item.showPrice.replace("￥", "") }}
                          <text
                            v-if="
                              item.spu.length == 1 &&
                              item.spu[0].current_price == 0
                            "
                            style="font-size: 22rpx;"
                          >
                            /{{ item.spu[0].unit }}</text
                          >
                          <!-- <text class="discount"
                            >￥{{ item.spu[0].purchase_price }}/{{
                              item.spu[0].unit
                            }}</text
                          >-->
                        </text>

                        <!-- <text v-else></text> -->
                        <!-- <view class="tag_box" v-if="item.spu.length > 1">
                          <image
                            @click.stop="showCart(index)"
                            class="addcartIcon"
                            src="../../static/image/addcart.png"
                            mode=""
                          ></image>
                          <text v-if="item.willBuyNum > 0" class="tag">{{
                            item.willBuyNum
                          }}</text>
                        </view> -->
                      </view>
                      <view
                        class="tag flex wrap flex_col_center"
                        v-if="item.datum.length"
                      >
                        <text
                          v-for="(i, index) in item.datum"
                          :key="index"
                          class="red_tag"
                          >{{ i.title }}</text
                        >
                        <text v-if="item.datum_activity" class="yellow_tag">{{
                          item.datum_activity
                        }}</text>
                      </view>
                      <view class="inventory">
                        <text v-if="item.minimum > 0"
                          >起订量：{{ item.minimum }}</text
                        >
                        <!-- <text v-if="item.designated_inventory > 0"
                          >库存：{{ item.inventory_left }}</text
                        > -->
                      </view>
                      <my-stepperr
                        class="stepper_btn"
                        :val="item.willBuyNum"
                        :min="item.minimum"
                        :limit="item.designated_inventory"
                        :inventory="item.inventory_left"
                        :index="index"
                        @plus="addAction(item, index, $event)"
                        @minus="subAction(item, index, $event)"
                        @showKey="showkeys(item, index)"
                      >
                      </my-stepperr>
                    </view>
                  </view>
                </view>
                <view class="titlea" v-else>
                  <span>{{ item.title }}</span>
                </view>
              </view>
            </scroll-view>

            <!-- <view
              v-if="toNext"
              @click="toNextAction"
              class="tonext flex-center"
            > -->
            <!-- {{ bottomText }} -->
            <!-- <text style="color: red; margin-left: 10rpx">{{
                next_category_name
              }}</text>
            </view> -->
            <view class="nodata" v-if="goods_list.length == 0">
              <image :src="nodataImg" mode="aspectFit"></image>
              <view>该分类暂时还没有商品~</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <my-keyboard ref="keyboard" @confirm="inputPrice"></my-keyboard>
    <my-addcart
      ref="minicart"
      @tabBarTag="changeTabBarTag"
      :canshowprice="canshowprice"
    ></my-addcart>
    <my-tabar :types="2" ref="tabar" current="1"></my-tabar>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  data() {
    return {
      sule: true,
      // 加入购物车的商品id
      checkedList: [],
      goodslist: [], //当前请求的列表
      // 总价
      nodataImg: getApp().globalData.nodataImg,
      // 获取购物车商品
      dataList: [],
      loginVolid: null, //是否强制登录
      logo: "",
      title: "",
      showLogo: 0,
      page: 1,
      count: 0,
      current: 0,
      scrollTop: 0,
      first_list: [],
      second_list: [],
      secondIndex: 0,
      goods_list: [],
      firstindex: 0,
      pid: null, //当前一级分类id
      category_id: 10, //当前二级分类id
      next_category_id: null, //下个二级分类id
      next_category_name: null, //下个二级分类
      last_id: null, //上个二级分类id
      top: false,
      toNext: false, //下级跳转增加新标题
      bottomText: "点击加载",
      indexNavid: null, //从首页导航或者banner过来
      flag: true, //onshow是否刷新
      currentClass: 0,
      open: false,
      // #ifdef APP-PLUS
      temp: 100,
      // #endif

      // #ifdef H5 || MP-WEIXIN
      temp: 80,
      // #endif

      // 供应链id
      company_id: null,
    };
  },
  mixins: [MixinShowprice],

  onReady() {
    getApp().setTitle();
  },

  onLoad(options) {
    this.indexNavid = options.navid;
    if (options.navid) {
      this.pid = options.navid;
    }
    if (options.company_id) {
      this.company_id = options.company_id;
    }
    this.loginVolid = !Boolean(
      uni.getStorageSync("loginVolid").is_login_category
    );
  },

  onShow() {
    //先由emit触发，再执行onshow
    uni.$once("updateclassify", (res) => {
      this.flag = false;
    });

    // if (this.flag) {
    this.goods_list = [];
    var params = {};
    if (this.pid) {
      Object.assign(params, {
        pid: this.pid,
      });
    }
    if (this.classfi) {
      this.pid = this.classfi.nav_id;
      Object.assign(params, {
        pid: this.pid,
      });
    }
    this.getData(1, params, this.secondIndex + 1);
    // }
    this.flag = true;
  },
  computed: {
    ...mapState(["companyInfo", "classfi"]),
    cssVars() {
      return {
        "--second_list_length": this.second_list.length,
      };
    },
  },
  filters: {
    hideTitle(value) {
      if (!value) return "";
      return value.slice(0, 4);
    },
    hideTitle1(value) {
      if (!value) return "";
      return value.slice(0, 5);
    },
  },
  methods: {
    // 去搜索页面
    searchPage() {
      uni.navigateTo({
        url: `/pages/index/search?from=shop&zid=${this.zid}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    // 返回
    navBack() {
      uni.reLaunch({
        url: "/pages/shop/index",
      });
    },
    getData(page, prop, index = 1) {
      // console.log(this.companyInfo);
      var params = {
        page: page,
        size: 15,
        company_id: this.companyInfo.supplier_id,
      };

      if (prop) {
        Object.assign(params, prop);
      }
      $https(
        "GET",
        "category",
        params,
        (res) => {
          let data = res.data.data;
          //商品总数
          this.count = data.count;

          // console.log("this.count", this.count);
          // 设置一级分类，当一级分类为0时，赋值给first_list，否则跳过;并且将商品制空
          if (this.first_list.length == 0) {
            this.first_list = data.first_list;
          }
          // 设置二级分类
          this.second_list = data.second_list;
          // this.category_id = this.second_list[0].id;

          let titles = {
            title: this.title,
          };
          if (this.toNext) {
            this.goods_list = this.goods_list.concat(titles);
            this.toNext = false;
            this.title = "";
          }

          // 设置展示的商品名称;处理价格规格sku
          if (this.top) {
            // this.goods_list = this.goods_list.unshift(data.goods_list);
            this.goods_list = { ...data.goods_list, ...this.goods_list };
          } else {
            let goods_list = this.changePrice(data.goods_list);
            this.goods_list = this.goods_list.concat(goods_list);
          }
          // console.log("this.title, this.goods_list", this.title, this.goods_list);

          this.goodslist = this.goodslist.concat(data.goods_list);
          // console.log("this.goodslist", this.goodslist);
          // if (this.goods_list.length < 10) {
          //   this.tolower();
          // }

          /**
           * 设置商品最后的文字展示效果
           * 判断条件：
           * 	1、商品数量大于0
           * 	2、当前商品数量是否低于总数量
           * 	3、当前secondIndex低于该二级分类总数 - 1
           * 		3.1、如果是最后一个二级分类时，应展示没有更多了
           *   if (
            this.goods_list.length > 0 &&
            this.goods_list.length == this.count &&
            this.secondIndex < this.second_list - 1
          ) {
           */
          // console.log("00000", this.secondIndex, this.second_list);

          // if (
          //   this.goods_list.length > 0 &&
          //   this.goodslist.length == this.count &&
          //   this.secondIndex < this.second_list - 1
          // ) {
          //   this.toNext = true;
          //   this.bottomText = "点击加载";
          // } else {
          //   this.toNext = true;
          //   // this.bottomText = "没有更多了";
          //   // this.goodslist = [];
          //   this.bottomText = "";
          //   this.next_category_name = null;
          //   this.next_category_id = null;
          // }

          //如果有这个id，说明是首页导航或者banner来的。默认选中那个分类
          if (this.indexNavid) {
            this.changeFirstCurrent(this.indexNavid);
          }
          /**
           * 获取下个二级分类的分类名、二级分类id
           */
          // console.log("999999second_list", this.second_list, index);
          let next = this.second_list[index];
          this.next_category_name = next ? next.title : null;
          this.next_category_id = next ? next.id : null;
          this.title = next ? next.title : null;

          // let last = this.second_list[index - 2];
          // this.last_id = last ? last.id : null;
          // if (this.last_id) {
          //   this.title = next ? last.title : null;
          // }

          // console.log("333333next_category_id", this.next_category_id);
          if (this.classfi) {
            this.secondIndex = this.first_list.findIndex((item) => {
              return item.id == this.pid;
            });
          }
          /**
           * 获取一级分类id
           * 刚进入分类页面时，需将一级分类的id赋值给pid，后续操作后pid修改
           */
          if (!this.pid && this.first_list.length) {
            this.pid = this.first_list[0].id;
          }
          this.page = page;
          this.$refs.tabar.changetag(res.data.data.all_cart_num);
          this.top = false;
        },
        this.loginVolid
      );
    },

    //处理价格规格sku
    changePrice(data) {
      var array = JSON.parse(JSON.stringify(data));
      for (let i in array) {
        //算出价格范围
        if (array[i].spu.length > 1) {
          var min, max;
          min = array[i].spu[0].market_price;
          if (array[i].spu[1].market_price < min) {
            max = Number(array[i].spu[0].market_price);
            min = Number(array[i].spu[1].market_price);
          } else {
            max = Number(array[i].spu[1].market_price);
            min = Number(array[i].spu[0].market_price);
          }
          for (let y in array[i].spu) {
            if (Number(array[i].spu[y].market_price) < min) {
              min = Number(array[i].spu[y].market_price);
            } else if (Number(array[i].spu[y].market_price) > max) {
              max = Number(array[i].spu[y].market_price);
            }
          }
          array[i].showPrice = `￥${min.toFixed(2)}~${max.toFixed(2)}`;
        } else if (array[i].spu.length == 1) {
          if (array[i].spu[0].activity_price) {
            //活动价
            array[i].showPrice = "￥" + array[i].spu[0].activity_price;
          } else if (array[i].spu[0].current_price == 1) {
            //是时价
            array[i].showPrice = "时价";
          } else {
            array[i].showPrice = "￥" + array[i].spu[0].market_price;
          }
          //只有一个规格时显示起订量、库存
          array[i].minimum = array[i].spu[0].minimum;
          array[i].designated_inventory = array[i].spu[0].inventory_hd
            ? 11
            : array[i].spu[0].designated_inventory;
          array[i].inventory_left =
            array[i].spu[0].inventory_hd || array[i].spu[0].inventory_left;
        }
        array[i].willBuyNum = array[i].num_cart_count;
      }
      return array;
    },

    // 点击二级分类时根据获取到的二级分类下标获取二级分类id并调用获取商品接口
    change(index) {
      this.sule = true;
      // 将商品列表制空
      this.goods_list = [];
      this.goodslist = [];
      // 修改二级分类选中的样式，赋值当前选中的二级分类下标
      this.currentClass = index;
      this.current = index;
      // 将商品下面的提示语隐藏
      // this.toNext = false;
      // 根据pid匹配一级分类的二级分类列表
      let category_list = this.first_list.filter(
        (item) => item.id == this.pid
      )[0];

      // console.log("11category_list ", index, category_list);
      // 获取二级分类id
      let category_id = category_list.selfNext[index]
        ? category_list.selfNext[index].id
        : null;
      this.getData(
        1,
        {
          pid: this.pid,
          category_id: category_id,
        },
        index + 1
      );
    },

    //点击一级列表
    toggleTab(index) {
      this.goods_list = [];
      this.sule = true;
      this.toggleTabs(index);
    },
    //跳转一级列表；
    toggleTabs(index) {
      this.goodslist = [];
      this.currentClass = 0;
      this.current = 0;
      this.secondIndex = index;
      // this.second_list = this.first_list[index].selfNext;
      // console.log("11111", index, this.first_list);
      if (!this.first_list[index]) {
        this.sule = this.first_list[index];
        // console.log("this.sule", this.sule);
      }
      this.pid = this.first_list[index].id;
      this.category_id = this.first_list[index].selfNext[0].id; //重设二级id
      // this.toNext = false;
      this.title = this.first_list[index].title;
      this.getData(1, {
        pid: this.pid,
        category_id: this.category_id,
      });
    },

    down() {
      this.open = !this.open;
      if (this.open == true) {
        let count = 1;
        for (let i = 1; i <= this.second_list.length; i++) {
          if (i % 3 == 0) {
            count++;
          }
        }

        this.temp = count * 130 || 130;
      } else {
        // #ifdef APP-PLUS
        this.temp = 100;
        // #endif

        // #ifdef H5 || MP-WEIXIN
        this.temp = 90;
        // #endif
      }
    },

    // 选择二级分类
    selectSecond(id, index) {
      // console.log("全部分类", id, index);
      // this.sule = true;
      // 将商品列表制空
      // this.goods_list = [];
      // 修改二级分类选中的样式，赋值当前选中的二级分类下标
      this.currentClass = index;
      this.current = index;
      // 将商品下面的提示语隐藏
      // this.toNext = false;
      this.goodslist = [];
      this.changes(index);
    },

    changes(index) {
      // 根据pid匹配一级分类的二级分类列表
      // console.log("index", index);
      let category_list = this.first_list.filter(
        (item) => item.id == this.pid
      )[0];
      // 获取二级分类id
      // console.log("category_list", category_list);
      let category_id = category_list.selfNext[index]
        ? category_list.selfNext[index].id
        : null;

      this.category_id = category_id;
      // console.log("11category_list ", this.category_id);
      this.getData(
        1,
        {
          pid: this.pid,
          category_id: category_id,
        },
        index + 1
      );
    },

    addAction(item, index, data) {
      // console.log("11111", item, index, data);
      //判断规格是否是单个
      if (item.spu.length > 1) {
        this.showCart(index);
      } else {
        var index = data.index,
          min = data.min,
          limit = data.limit,
          inventory = data.inventory,
          val = data.value;
        if (val < min) {
          val = min;
        } else if (limit > 0 && val + 1 >= inventory) {
          //不能超过库存量
          val = inventory;
          uni.showToast({
            icon: "none",
            title: "库存不足",
          });
          return;
        } else {
          val++;
        }
        this.addToCart(
          this.goods_list[index].id,
          this.goods_list[index].spu[0].id,
          val.toFixed(2),
          index
        );
      }
    },
    //
    //输入数量
    showkeys(item, index) {
      // console.log("0000", item);
      if (item.spu.length > 1) {
        this.showCart(index);
      } else {
        this.$refs.keyboard.open(
          item.is_standard,
          index,
          item.minimum,
          item.inventory_left,
          item.designated_inventory
        );
      }
    },

    subAction(item, i, data) {
      // console.log("data", data);
      if (item.spu.length > 1) {
        //判断规格是否是单个
        this.showCart(i);
      } else {
        var index = data.index,
          min = data.min,
          inventory = data.inventory,
          val = data.value;

        if (val - 1 < min) {
          val = 0;
        } else {
          val--;
        }
        this.addToCart(
          this.goods_list[index].id,
          this.goods_list[index].spu[0].id,
          val.toFixed(2),
          index
        );
      }
    },

    inputPrice(data) {
      // console.log("data", data);
      var val = Number(data.value),
        index = data.index;

      this.addToCart(
        this.goods_list[index].id,
        this.goods_list[index].spu[0].id,
        val.toFixed(2),
        index
      );
    },
    addToCart(goodsId, spuId, num, index) {
      var options = {
        goods_id: goodsId,
        spu_id: spuId,
        num,
      };
      $https(
        "POSTN",
        `changeCart?company_id=${this.companyInfo.supplier_id}`,
        options,
        (res) => {
          if (res.data.errcode == 0) {
            this.goods_list[index].willBuyNum = Number(num);
            this.$refs.tabar.changetag(res.data.data.all_cart_num);
          } else {
            uni.showToast({
              title: res.data.errmsg,
              icon: "none",
            });
          }
        }
      );
    },
    //跳到商品详情
    detailPage(index, id) {
      // console.log("index, id", index, id);
      uni.navigateTo({
        url: `../../pages/index/shopdetail?id=${id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },

    //显示小购物车
    showCart(index) {
      var data = this.goods_list[index];
      // console.log("11", data);
      this.$refs.minicart.open(data, index);
    },

    toNextAction() {
      // if (this.next_category_id) {
      //   //如果有下级id，表示可点击。
      //   this.selectSecond(this.next_category_id, this.current + 1);
      // }
    },
    //改变底部导航栏购物车tag
    changeTabBarTag(option) {
      const { num, index, willBuyNum, checked } = option;
      this.goods_list[index].spu[checked].cart_num = willBuyNum;
      this.$refs.tabar.changetag(num);
    },

    changeFirstCurrent(id) {
      for (let index in this.first_list) {
        if (this.first_list[index].id == id) {
          this.current = index;
          this.indexNavid = null;
          return;
        }
      }
    },
    // 顶部刷新
    upper: function (e) {
      // console.log("顶部调用数据", e);
      // this.top = true;
      // var page = this.page;
      // if (this.last_id) {
      //   page--;
      //   this.getData(
      //     page,
      //     {
      //       pid: this.pid,
      //       category_id: this.category_id,
      //     },
      //     this.current
      //   );
      // }
    },

    //底部刷新
    tolower(e) {
      this.top = false;
      // console.log("底部调用数据", e);
    },

    scrollGet(e) {
      // console.log("eeee", e);
    },

    leftClick() {
      uni.reLaunch({
        url: "/pages/tabar/index",
      });
    },
  },

  onReachBottom() {
    var page = this.page;
    //如果请求到底就请求下一列表
    if (this.goodslist.length < this.count) {
      // console.log("666", this.goodslist.length, this.count);
      page++;
      this.getData(
        page,
        {
          pid: this.pid,
          category_id: this.category_id,
        },
        this.current + 1
      );
    } else {
      this.toNext = true;

      if (this.next_category_id) {
        this.current++;
        // //如果有下级id，表示可点击。
        // console.log("1111", this.next_category_id);
        this.selectSecond(this.next_category_id, this.current);
      } else {
        // this.sule = this.first_list[index];
        // if (this.sule) {
        // console.log("2222222");
        if (this.sule) {
          // console.log("3333333");
          if (this.secondIndex < this.first_list.length - 1) {
            this.secondIndex++;
            this.toggleTabs(this.secondIndex);
          }
        }
      }
    }
  },
  onHide() {
    // this.secondIndex = 0;
    this.current = 0;
    this.category_id = null; //当前二级分类id
    this.next_category_id = null; //下个二级分类id
    this.next_category_name = null; //下个二级分类
    this.open = false;
    this.goodslist = [];
    this.$store.commit('changeClassfi',null)
  },
};
</script>

<style lang="scss" scoped>
$dgreen: #40ae36;
.navbar {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
  padding: 0 45rpx 0 30rpx;
  box-sizing: border-box;
  position: fixed;
  z-index: 9;

  image {
    width: 44rpx;
    height: 43rpx;
  }
  .input {
    width: 600rpx;
    height: 60rpx;
    background-color: #ffffff;
    border-radius: 45rpx;
    margin-left: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20rpx;
    box-sizing: border-box;
    .icon {
      width: 36rpx;
      overflow: unset !important;
    }

    .icon_span {
      font-size: 28rpx;
      margin-left: 20rpx;
      color: #ccc;
    }
  }
}

/deep/ .u-tab-item {
  padding: 11rpx !important;
  border-radius: 6rpx;
  background: #edeff2;
  height: auto !important;
  line-height: normal !important;
  margin: 20rpx;
}

.navbar_height {
  // #ifdef APP-PLUS
  height: calc(100rpx + var(--status-bar-height));
  // #endif
  // #ifndef APP-PLUS
  height: 100rpx;
  // #endif
}

/deep/.u-drawer {
  overflow: unset !important;
}

.classify {
  background-color: #fff;
  font-family: PingFang SC;

  .all_area {
    display: flex;

    // margin-bottom:90rpx;
    .left_area {
      // height: calc(100vh - 90px - 128rpx);
      background: #f7f8fa;
      position: fixed;
      left: 0;
      top: calc(var(--status-bar-height) + 100rpx);
      bottom: 0;

      .scroll_left {
        width: 198rpx;
        height: calc(100vh - 98rpx - 130rpx);
      }

      .sign_second {
        height: 100rpx;
        padding: 0 8rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
      }

      .active_text {
        background: $white;
      }

      .active_text text {
        color: $dgreen;
        font-weight: 600;
      }

      // .active_text::before {
      //   display: block;
      //   position: absolute;
      //   left: 0;
      //   width: 8rpx;
      //   height: 32rpx;
      //   // margin-top: 32rpx;
      //   background: $dgreen;
      //   content: "";
      // }
    }

    .right_area {
      width: 100%;
      margin-left: 200rpx;
      // flex: 1;
      // border-top: 1px solid #d1d1d1;
      // height: calc(100vh - 98rpx - 130rpx);
      overflow: auto;
      // position: relative;
      display: flex;
      flex-direction: column;

      .right_top {
        position: fixed;
        top: calc(var(--status-bar-height) + 100rpx);
        left: 200rpx;
        right: 0;
        background: #ffffff;
        z-index: 2;
        display: flex;

        .choose_food {
          font-size: 32rpx;
          color: #191919;
          padding: 15rpx 16rpx;
        }
      }

      .right_content {
        flex: 1;
        overflow: auto;
        //#ifndef MP-WEIXIN
        // margin-top: calc(var(--status-bar-height) + 74rpx);
        // #endif
        //#ifdef MP-WEIXIN
        // margin-top: 74rpx;

        // #endif
        .tonext {
          height: 150rpx;
        }

        // .all_good_height {
        //   height: calc(100vh - 260rpx);

        // }
        .nodata {
          margin-left: 270rpx;
        }

        .my_listcol {
          box-sizing: border-box;

          .list {
            // min-height: 200rpx;
            flex: 1;
            padding: 20rpx 0;
            margin: 0 30rpx;
            border-bottom: 1px solid #e7e8e8;
            display: flex;

            .info {
              flex-grow: 1;
              align-items: center;
              position: relative;

              .logo {
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
              }

              .photo {
                width: 120rpx;
                height: 120rpx;
                margin-right: 16rpx;
              }
            }

            .desc {
              height: 100%;
              // height: 120rpx;
              flex: 1;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              // align-items: center;
              // justify-items: space-between;

              // // font-size: 20rpx;
              // > view + view {
              //   margin-top: 4rpx;
              // }

              .price_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #F55726;
                .red_font {
                  color: #F55726;
                }
                // margin-top: 30rpx;
                .ten {
                  font-size: 36rpx;
                  font-family: PingFang SC;
                  font-weight: bold;
                }
                .tag {
                  position: absolute;
                  right: -20rpx;
                  top: -8rpx;
                  margin-top: -5px;
                  padding: 0 8rpx;
                  transform: scale(0.8);
                  height: 15px;
                  line-height: 15px;
                  border-radius: 15rpx;
                  text-align: center;
                  color: $white;
                  font-size: 20rpx;
                  background: #fa3534;
                }

                // .addcartIcon {
                //   width: 60rpx;
                //   height: 60rpx;
                // }
              }

              .list_name {
                .name {
                  font-size: 32rpx;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #333333;
                }

                .des {
                  flex: 1;
                  color: #999;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                  // white-space: nowrap;
                  // overflow: hidden;
                  // text-overflow: ellipsis;
                  font-size: 20rpx;
                  // color: #CCCCCC;
                }
              }

              .red_tag {
                font-size: 20rpx;
                padding: 0 12rpx;
                background: red;
              }

              .yellow_tag {
                font-size: 20rpx;
                // padding: 0 12rpx;
                background: #ff9900;
                border-radius: 6rpx;
                color: #fff;
              }

              .inventory {
                color: #737373;
                font-size: 20rpx;

                // > text + text {
                //   margin-left: 20rpx;
                // }
              }
            }

            .custom-icon-gouwu {
              color: $dgreen;
              font-size: 10px;
            }
          }

          .titlea {
            margin: 40rpx 0 0 0;
            font-weight: 700;
            span {
              margin: 20rpx 0 0 20rpx;
            }
          }
        }
      }
    }
  }
}

.over_box {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(var(--second_list_length) / 3, 80rpx);
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 0 14rpx;
}

.tab_box {
  width: 88%;
  padding: 0 14rpx;
}

.new_block {
  width: 156rpx;
  height: 70rpx;
  line-height: 76rpx;
  background: #edeff2;
  border-radius: 10rpx;
  margin: 10rpx;
}

.new_hig {
  height: auto !important;
}

.icon_down {
  height: 74rpx;
  line-height: 74rpx;
  padding-right: 28rpx;
  display: flex;
  margin-top: 10rpx;
}

.active {
  background-color: rgba(64, 173, 54, 0.2);
}

.stepper_btn {
  position: absolute;
  bottom: 30rpx;
  right: 0;
}

.heji {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 116rpx;
  padding-left: 24rpx;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  color: #737373;
  display: flex;
  flex-direction: row-reverse;

  .right {
    display: flex;
    align-items: center;

    .price {
      color: #e84b4b;
      font-size: 32rpx;
    }

    .jf {
      color: #e84b4b;
      font-size: 24rpx;
    }

    .to {
      margin-left: 30rpx;
      width: 210rpx;
      height: 116rpx;
      background: $dgreen;
      color: #fff;
    }
  }
}

.discount {
  font-size: 22rpx;
  color: #cccccc;
  text-decoration: line-through;
}

/deep/.u-tab-item {
  font-size: 26rpx !important;
  margin: 20rpx 10rpx !important;
}
</style>
